<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>宏三内测专区搜索结果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="mobileOptimized" content="width" />
    <meta name="handheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="/static/css/main.css" />
    <script src="/static/script/zepto.min.js"></script>
</head>
<body class="m-sch-list m-cate-list">
    <dl class="fm f-cb">
        <dt><a href="javascript:back()">取消</a></dt>
        <dd>
            <input id="J_search" type="text" value="<?=$value?>" />
            <a href="javascript:search()">搜索</a>
        </dd>
    </dl>

<?php if (empty($data)) {?>
    <h3 class="m-no-info">暂无信息</h3>
<?php } else {?>
<ul class="list f-cb" id="J_forList">
    <?php foreach($data as $item) {?>
    <li class="J_forLink" data-url="<?= Yii::$app->request->hostInfo . '/web/product/detail?pid=' . $item['pid']?>">
        <img src="<?=$item['img']?>" />
        <a href="../product/detail?pid=<?=$item['pid']?>"><?=$item['name']?></a>
        <b>￥ <?=$item['price']?></b>
    </li>
    <?php }?>
</ul>
<?php }?>

    <img class="u-load" id="J_loading" src="/static/img/loading.gif" />

<script>


    $(function(){

        var img = $('#J_forList').find('img');
        img.height(img.eq(0).width());


        //下拉分页加载

        var _loading = $('#J_loading');
        var forRun = document.getElementById('J_forList');
        var start = 0, flag = true, page = 2;
        forRun.addEventListener('touchstart', function(ev){ start = ev.touches[0].pageY; }, false);
        forRun.addEventListener('touchmove', function(ev){

            // 筛选栏显示与隐藏
            var end = ev.touches[0].pageY - start;
            if(end > 0){

                flag = true;
            }else{

                // 控制上拉加载
                if($(document).height() == ($(window).scrollTop() + $(window).height()) && flag){

                    // 加载锁定
                    flag = false;

                    // 先显示 加载中...
                    _loading.css({display:'block'});

                    $.ajax({ url: 'list?funcName=?', dataType:'jsonp', data:{'keyWords':'<?=$value?>','page':page,'pre-page':20,'shop_id':1001}, timeout:5000,

                        success: function(_info){

                            page++;

                            // 请求成功后 隐藏 加载中...
                            _loading.css({display:'none'});

                            console.log(_info);

                            $('#J_forList').append(createList(_info));

                            // 加载解锁
                            flag = true;
                        }
                    });

                }
            }

        }, false);

    });

    function createList(_data){

        var _li = '';

        for(var i in _data){
            _li += '<li class="J_forLink" data-url="../product/detail?pid=' + _data[i]['pid'] + '"?><img src="'+ _data[i]['img'] +'" style="height: 159px";/><a href="../product/detail?pid=' + _data[i]['id'] + '">'+ _data[i]['name'] +'</a><b>￥ '+ _data[i]['price'] +'</b></li>';
        }

        return _li;
    }

    //返回搜索
    function back()
    {
        window.location.href = '../search/index';
    }

    //把搜索的内容传递到搜索结果，跳转到搜索结果商品页面显示
    function search()
    {
        window.location.href = 'list?keyWords='+ $.trim($("#J_search").val());
    }

    //添加搜索结果商品列表图片点击热区
    $(document.body).on('tap', '.J_forLink', function(){

        window.location.href = $(this).attr('data-url');
    });

</script>
</body>